GitHub

您所在的位置：网站首页 › react meteor data › GitHub

GitHub

2023-08-13 08:16| 来源: 网络整理| 查看: 265

React Meteor Data

Fetch Meteor data in React using decorators

Medium Post

Using decorators to fetch Meteor data in React Using Meteor methods on React components to fetch data Installing

Install the package

meteor add orionsoft:react-meteor-data

Install the babel decorator

npm install --save-dev babel-plugin-transform-decorators-legacy

Create or update the .babelrc file in the root of your app

{ "plugins": [ "babel-plugin-transform-decorators-legacy" ] }

###聽Example with publication

import React from 'react' import {Meteor} from 'meteor/meteor' import {withData} from 'meteor/orionsoft:react-meteor-data' import MyCollection from './my-collection' /** * Prop will be checked also in the container */ const propTypes = { itemId: React.PropTypes.string.isRequired, isLoading: React.PropTypes.bool, item: React.PropTypes.string } @withData(({itemId}) => { const handler = Meteor.subscribe('myPublication', itemId) const isLoading = !handler.ready() const item = MyCollection.findOne(itemId) return {isLoading, item} }) export default class Component extends React.Component { render () { if (this.props.isLoading) return return ( {this.props.item.name} ) } } Component.propTypes = propTypes

###聽Example with method

import React from 'react' import {Meteor} from 'meteor/meteor' import {withMethodData} from 'meteor/orionsoft:react-meteor-data' /** * Prop will be checked also in the container */ const propTypes = { itemId: React.PropTypes.string.isRequired, isLoading: React.PropTypes.bool, item: React.PropTypes.string } @withMethodData(({itemId}, ready) => { Meteor.call('getItem', itemId, ready) }) export default class Component extends React.Component { render () { if (this.props.isLoading) return return ( {this.props.item.name} ) } } Component.propTypes = propTypes // On the server Meteor.methods({ 'getItem': function (itemId) { const item = Items.findOne(itemId) return {item} // objects returned in the method will be passed as props } })

【本文地址】

GitHub

GitHub

今日新闻

推荐新闻